import React, { Component } from "react";
// createPortal就是将组件挂载到父元素以外的dom节点中
import { createPortal } from "react-dom";

class Child extends Component {
  state = {};
  render() {
    // 接受两个参数，第一个是dom元素，第二个是想要挂载的地方(通常是body)

    // 一般情况下，就是需要根据窗口进行定位的组件
    // 比如一些对话框，轻提示等
    return createPortal(
      <div className="child">child子组件</div>,
      document.querySelector("body")
    );
  }
}

class App extends Component {
  state = {};
  render() {
    return (
      <div className="box">
        <h2>portal</h2>
        <Child />
      </div>
    );
  }
}

export default App;
